<template>
	<view class="mainbgc">
		<header-top :messageInfo="{typeFlag:true,message:'业务员拜访记录',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content">
					<view class="nostrongtext" @click="show=true">筛选</view>
				</view>
			</view>
		</header-top>
		<view class="mainpadding2">
			<view class="flexcenter" v-if="!list.total">
				<view class="placeholderimage"></view>
			</view>
			<view class="mainpadding ffffff box1 margin_top radius" v-for="item in list.data" :key="item.id">
				<view class="flexbetween topbox">
					<view class="left flexleft">
						<view class="text">{{item.custom.name}}</view>
					</view>
					<view class="right">+{{item.total_pirce}}</view>
				</view>
				<view class="margin_top xiaohui flexbetween">
					<view>客户姓名：{{item.custom.username}} {{item.custom.mobile}}</view>
					<view v-if="item.custom.customlevel">等级：{{item.custom.customlevel.name}}</view>
				</view>
				<view class="margin_top xiaohui flexbetween" v-if="item.staff">
					<view>业务姓名：{{item.staff.username}}</view>
					<view>部门：{{item.staff.staffbm.name}}</view>
				</view>
				<view class="margin_top xiaohui">
					<view>客户地址：{{item.custom.cityinfo}}{{item.custom.address}}</view>
				</view>
				<view class="margin_top xiaohui" v-show="item.notes">
					<view>备注：{{item.notes}}</view>
				</view>
				<view class="flexleft">
					<view class="bottombox" v-for="(ite,index) in item.clpz_images_text" :key="ite" @click="lbtpriview(index,item.clpz_images_text)">
						<image class="image" :src="ite" mode=""></image>
					</view>
				</view>
				<view class="alltext time numbertext">{{item.createtime_text}}(在店{{item.onlin_time}})</view>
				<template v-if=" item.customvisitresult.length">
					<view class="strongtext margin_top" v-if=" item.customvisitresult.length">
						<text class="titletext textliner">拜访成果</text>
					</view>
					<view class="nostrongtext ffffff margin_top" v-for="ite in item.customvisitresult" :key="ite.id">
						<view class="flexbetween" @click="djhzclick(ite)">
							<view>{{ite.notes}}</view>
							<view class="righticon2"></view>
						</view>
					</view>
				</template>
			</view>
		</view>
		<view class="mainpadding posibottom">
			<view class="namecolor flexcenter">
				总销售额：<text class="xiaolv">{{dataAll.total_price}}</text>
			</view>
		</view>
		<u-popup round="20" :show="show" @close="show=false">
			<view class="mainpadding">
				<view class="flexcenter">
					<view class="titletext">筛选</view>
				</view>
				<view class="strongtext margin_top">时间</view>
				<view class="flexleft" style="flex-wrap: wrap;">
					<view class="screenbox flexcenter" v-for="(item,index) in datelist" :key="item.id"
						@click="change(item.name,index)">
						<view :class="currents == index? 'itemscreenfocus margin_top':'itemscreen margin_top'">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="strongtext margin_top">自定义时间</view>
				<view class="flexleft">
					<view class="inputscreenbox flexcenter" @click="shows=true">
						<input class="itemscreen margin_top" type="text" disabled v-model="start">
					</view>
					<view class="zwscreenbox flexcenter">
						<view class="strongtext">-</view>
					</view>
					<view class="inputscreenbox flexcenter" @click="showss=true">
						<input class="itemscreen margin_top" type="text" disabled v-model="end">
					</view>
				</view>
				<view class="itemscreen2 flexleft margin_top" @click="selectRole('/pages/workbench/jiben/yuangongda?type=2')">
					<view class="strongtext minwidth">员工</view>
					<view class="rightscreen flexbetween">
						<input type="text" disabled="true" placeholder="请选择员工" v-model="staff_name">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="itemscreen2 flexleft margin_top" @click="selectRole('/pages/workbench/jiben/kehuda?type=1')">
					<view class="strongtext minwidth">客户</view>
					<view class="rightscreen flexbetween">
						<input type="text" disabled="true" placeholder="请选择客户" v-model="custom_name">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="itemscreen2 flexleft margin_top" @click="khDengJiShow=true">
					<view class="strongtext minwidth">客户等级</view>
					<view class="rightscreen flexbetween">
						<input type="text" disabled="true" placeholder="请选择客户等级" v-model="khDengJiText">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="itemscreen2 flexleft margin_top" @click="khPianQuShow=true">
					<view class="strongtext minwidth">客户片区</view>
					<view class="rightscreen flexbetween">
						<input type="text" disabled="true" placeholder="请选择客户片区" v-model="khPianQuText">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="flexbetween">
					<view class="surebtn reset flexcenter" style="margin-top: 60rpx;" @click="resetbtn">重置</view>
					<view class="surebtn flexcenter" style="margin-top: 60rpx;" @click="sureBtn">确认</view>
				</view>
			</view>
		</u-popup>
		<u-datetime-picker :show="shows" v-model="value1" mode="date" @confirm="confirm" @cancel="shows=false"
			 @close="shows=false"></u-datetime-picker>
		<u-datetime-picker :show="showss" v-model="value2" mode="date" @confirm="confirms" @cancel="showss=false"
			:minDate="mintime" @close="showss=false"></u-datetime-picker>
		<selectKHDengJi :message="{khDengJiShow:khDengJiShow}" @khDengJiSure="khDengJiSure"></selectKHDengJi>
		<!-- 客户等级 -->
		<selectKHPianQu :message="{khPianQuShow:khPianQuShow}" @khPianQuSure="khPianQuSure"></selectKHPianQu>
		<!-- 客户片区 -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return { // 时间选择
				datelist: [{
						id: 1,
						name: '今日'
					},
					{
						id: 2,
						name: '昨日'
					},
					{
						id: 3,
						name: '本月'
					},
				],
				show: false, //筛选弹出层
				// 时间筛选
				currents: -1,
				start: '开始时间',
				end: '结束时间',
				shows: false,
				showss: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				mintime: Number(new Date()),
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				// 客户片区
				khPianQuShow: false,
				khPianQuText: "",
				custom_area_id: "", //客户片区ID
				// 客户等级
				khDengJiShow: false,
				khDengJiText: "",
				custom_level_id: "", //客户等级ID
				staff_id:"",//业务员
				staff_name:"",
				custom_name:"",//客户
				custom_id:"",
				dataAll:{}
			}
		},
		onLoad() {
			this.init()
		},
		onShow() {
			let that = this
			uni.$off('khSelectFn');
			uni.$on('khSelectFn', (data) => {
				that.custom_id = data.id
				that.custom_name = data.name
				return false
			})
			uni.$off('ygSelectFn');
			uni.$on('ygSelectFn', (data) => {
				that.staff_id = data.id
				that.staff_name = data.name
				return false
			})
			
		},
		methods: {
			lbtpriview(index,arr){
							var i = arr; //获取当前页面的轮播图数据
							//uniapp预览轮播图
							uni.previewImage({
								current:index, //预览图片的下标
								urls:i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
							})
						},
			selectRole(url) {
				uni.navigateTo({
					url
				})
			},
			khDengJiSure(e) { //客户等级
				if (e) {
					this.khDengJiText = e.value[0].name
					this.custom_level_id = e.value[0].id
				}
				this.khDengJiShow = false
			},
			khPianQuSure(e) { //客户片区
				if (e) {
					this.khPianQuText = e.value[0].name
					this.custom_area_id = e.value[0].id
				}
				this.khPianQuShow = false
			},
			// 拜访成果详情，
			djhzclick(item){
				// 1=销售单,2=销售退货单,3=费用支出,4=预收款,5=客户结算
				if(item.type==1){//销售单
					uni.navigateTo({
						url:"/pages/workbench/xiaoshou/xiaoshoudxq?id="+item.order_id
					})
				} else if(item.type==2){//销售退货单
					uni.navigateTo({
						url:"/pages/workbench/xiaoshou/tuihuodxq?id="+item.order_id
					})
				} else if(item.type==3){//费用支出
					uni.navigateTo({
						url:"/pages/workbench/caiwu/feiyongzcxq?id="+item.order_id
					})
				} else if(item.type==4){//预收款
					uni.navigateTo({
						url:"/pages/workbench/caiwu/kehuyskxq?id="+item.order_id
					})
				} else if(item.type==5){//客户结算
					uni.navigateTo({
						url:"/pages/workbench/caiwu/kehujsdetail?id="+item.order_id
					})
				}
			},
			init(isPage, page) {
				this.initdetail(isPage, page)
				let _this = this;
				httpRequest.request('/dhtapi/Custom/visitList', 'POST', {
					page: page || 1,
					limit: _this.limit,
					start_time: this.start == '开始时间' ? '' : this.start, //开始日期
					end_time: this.end == '结束时间' ? '' : this.end, //结束日期
					custom_area_id:this.custom_area_id,//片区
					custom_level_id:this.custom_level_id,
					custom_id:this.custom_id,
					staff_id:this.staff_id,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = resList
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			initdetail(isPage, page){
				let _this = this;
				httpRequest.request('/dhtapi/Custom/visitListData', 'POST', {
					page: page || 1,
					limit: _this.limit,
					start_time: this.start == '开始时间' ? '' : this.start, //开始日期
					end_time: this.end == '结束时间' ? '' : this.end, //结束日期
					custom_area_id:this.custom_area_id,//片区
					custom_level_id:this.custom_level_id,
					custom_id:this.custom_id,
					staff_id:this.staff_id,
				}, false, false, true).then(res => {
					this.dataAll = res.data
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			confirm(e) {
				this.shows = false;
				this.show = true;
				this.end = '结束时间';
				this.mintime = e.value;
				this.start = httpRequest.returnDate(e.value);
				this.currents = -1;
			},
			confirms(e) {
				this.showss = false;
				this.show = true;
				this.maxtime = e.value;
				this.end = httpRequest.returnDate(e.value);
				this.currents = -1;
			},
			change(name, index) {
				if (name == "今日") {
					this.start = this.riqi(0);
					this.end = this.riqi(0);
				} else if (name == "昨日") {
					this.start = this.riqi(-1);
					this.end = this.riqi(-1);
				} else if (name == "本月") {
					this.start = this.benyue();
					this.end = this.riqi(0);
				}
				this.currents = index;
			},
			// 昨天“-1”今天“0”明天“1”
			riqi(day) {
				let dd = new Date();
				dd.setDate(dd.getDate() + day);
				let y = dd.getFullYear();
				let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
				let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				return y + "-" + m + "-" + d;
			},
			// 本月第一天
			benyue() {
				let y = new Date().getFullYear(); //获取年份
				let m = new Date().getMonth() + 1; //获取月份
				let d = '01'
				m = m < 10 ? '0' + m : m; //月份补 0
				return [y, m, d].join("-")
			},
			// 重置
			resetbtn() {
				this.currents = -1
				this.start = "开始时间"
				this.end = "结束时间"
				this.khDengJiText = ""
				this.khPianQuText = ""
				this.custom_level_id = ""
				this.custom_area_id = ""
				this.staff_name = ""
				this.staff_id = ""
				this.custom_id = ""
				this.custom_name = ""
				this.init()
				this.show = false
			},
			sureBtn() {
				this.show = false
				this.init()
			},
			//跳转详情
			jumpdetail(id) {
				uni.navigateTo({
					url: "/pages/workbench/xiaoshou/ceshimd?id=" + id
				})
			},
			formatSeconds(value) {
				var secondTime = parseInt(value); // 秒
				var minuteTime = 0; // 分
				var hourTime = 0; // 小时
				if (secondTime > 60) { //如果秒数大于60，将秒数转换成整数
					//获取分钟，除以60取整数，得到整数分钟
					minuteTime = parseInt(secondTime / 60);
					//获取秒数，秒数取佘，得到整数秒数
					secondTime = parseInt(secondTime % 60);
					//如果分钟大于60，将分钟转换成小时
					if (minuteTime > 60) {
						//获取小时，获取分钟除以60，得到整数小时
						hourTime = parseInt(minuteTime / 60);
						//获取小时后取佘的分，获取分钟除以60取佘的分
						minuteTime = parseInt(minuteTime % 60);
					}
				}
				var result = "" + parseInt(secondTime) + "秒";

				if (minuteTime > 0) {
					result = "" + parseInt(minuteTime) + "分" + result;
				}
				if (hourTime > 0) {
					result = "" + parseInt(hourTime) + "小时" + result;
				}
				return result;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.posibottom{
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		box-sizing: border-box;
	}
	.smalltext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	// tab切换
	.selectbox {
		padding: 6rpx 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
		line-height: 33rpx;
		background-color: #e1f4f5;
		border-radius: 30rpx;
		margin-right: 30rpx;
	}

	.noselectbox {
		padding: 6rpx 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
		line-height: 33rpx;
		background-color: #eff0f0;
		border-radius: 30rpx;
		margin-right: 30rpx;
	}

	.selecttimetext {
		font-size: 24rpx;
		font-family: San Francisco Display-Medium, San Francisco Display;
		font-weight: 500;
		color: #666666;
		line-height: 24rpx;
	}

	.bosstask {
		height: 40rpx;
		width: 160rpx;
		background-image: url("@/static/image/system/bosstask.png");
		background-size: 100% 100%;
	}

	.text {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		margin-left: 26rpx;
	}

	.right {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
	}

	.image {
		width: 150rpx;
		height: 150rpx;
		box-shadow: 0rpx 4rpx 12rpx 2rpx rgba(0, 0, 0, 0.0200);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.topbox {
		border-bottom: 2rpx solid rgba(0, 0, 0, .03);
		padding-bottom: 22rpx;
	}

	.bottombox {
		width: 25%;
		padding: 22rpx 0;
		border-bottom: 2rpx solid rgba(0, 0, 0, .03);
	}

	.numbertext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.alltext {
		padding-top: 30rpx;
	}

	// 审核状态
	.wlable {
		padding: 6rpx 14rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3AD3D;
		line-height: 28rpx;
		background-color: #fef7ec;
	}

	.shlable {
		padding: 6rpx 14rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		line-height: 28rpx;
		background-color: #e7f9fa;
	}

	.inputscreenbox {
		width: 40%;

		input {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333;
			background-color: #f7f9fa;
		}
	}

	.zwscreenbox {
		width: 20%;
		line-height: 80rpx;
	}

	.itemscreenfocus {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		background-color: #e7f9fa;
	}

	// 筛选内容
	.screenbox {
		width: 33.33%;
	}

	.itemscreen {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		background-color: #f7f9fa;
	}

	.surebtn {
		width: 45%;
	}

	.reset {
		background: #ebb563;
	}

	// 底部
	.tab_bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 30rpx 50rpx;
	}

	.minwidth {
		min-width: 130rpx;
	}

	.rightscreen {
		width: 100%;
	}

	.itemscreen2 {
		padding-bottom: 20rpx;
	}
</style>